<template>
  <view class="custom-navbar" :style="navbarStyle">
    <!-- 返回按钮 -->
    <view class="nav-left" @click="goBack">
      <view class="back-icon">
        <text class="iconfont icon-back"></text>
      </view>
    </view>
    
    <!-- 标题 -->
    <view class="nav-title" :style="titleStyle">{{ title }}</view>
    
    <!-- 右侧操作区 -->
    <view class="nav-right" v-if="rightButtons && rightButtons.length > 0">
      <view class="right-btn" 
            v-for="(btn, index) in rightButtons" 
            :key="index" 
            @click="handleRightBtnClick(btn)">
        <text v-if="btn.icon" class="iconfont" :class="btn.icon"></text>
        <text v-else>{{ btn.text || '' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomNavbar',
  data() {
    return {
      statusBarHeight: 0,
      navBarHeight: 44, // 默认导航栏高度
      windowWidth: 375, // 默认窗口宽度
      safeAreaInsetsTop: 0, // 安全区域顶部距离
      isIphoneX: false // 是否为异形屏设备
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    // 是否显示返回按钮
    showBack: {
      type: Boolean,
      default: true
    },
    // 右侧按钮配置 [{text: '按钮', icon: 'icon-more', callback: 'more'}]
    rightButtons: {
      type: Array,
      default: () => []
    },
    // 导航栏背景色
    backgroundColor: {
      type: String,
      default: '#ffffff'
    },
    // 标题颜色
    titleColor: {
      type: String,
      default: '#000000'
    }
  },
  computed: {
    navbarStyle() {
      // 为异形屏增加额外的安全距离
      const extraPadding = this.isIphoneX ? 10 : 0;
      return `height: ${this.statusBarHeight + this.navBarHeight + this.safeAreaInsetsTop + extraPadding}px; 
              padding-top: ${this.statusBarHeight + this.safeAreaInsetsTop + extraPadding}px;
              background-color: ${this.backgroundColor};`
    },
    titleStyle() {
      return `color: ${this.titleColor};`
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 处理右侧按钮点击事件
    handleRightBtnClick(btn) {
      if (btn.callback) {
        this.$emit(btn.callback)
      }
    }
  },
  onLoad() {
    // 获取系统信息
    const sysInfo = uni.getSystemInfoSync()
    this.statusBarHeight = sysInfo.statusBarHeight
    this.windowWidth = sysInfo.windowWidth
    
    // 判断是否为iOS设备，调整导航栏高度
    if (sysInfo.system.indexOf('iOS') > -1) {
      this.navBarHeight = 44
    } else {
      this.navBarHeight = 48
    }
    
    // 获取安全区域信息，处理刘海屏
    if (sysInfo.safeArea) {
      this.safeAreaInsetsTop = sysInfo.safeArea.top - this.statusBarHeight
      if (this.safeAreaInsetsTop < 0) this.safeAreaInsetsTop = 0
    }
    
    // 判断是否为异形屏设备
    this.isIphoneX = this.checkIsIphoneX(sysInfo)
  },
  methods: {
    // 检测是否为异形屏设备
    checkIsIphoneX(sysInfo) {
      const screenHeight = sysInfo.screenHeight
      const screenWidth = sysInfo.screenWidth
      const model = sysInfo.model
      
      // iPhone X 系列设备特征检测
      const isIPhone = sysInfo.platform === 'ios'
      const isIPhoneXSeries = (
        (screenHeight === 812 || screenHeight === 896 || screenHeight === 926) && 
        screenWidth === 375
      )
      
      // 或者通过型号关键字检测
      const hasNotchKeywords = [
        'iPhone X', 'iPhone 11', 'iPhone 12', 'iPhone 13', 'iPhone 14'
      ]
      const hasNotch = hasNotchKeywords.some(keyword => model.includes(keyword))
      
      return isIPhone && (isIPhoneXSeries || hasNotch)
    }
  }
}
</script>

<style>
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.nav-left {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  flex: 1;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 44px;
}

.nav-right {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 15px;
}

.right-btn {
  height: 44px;
  line-height: 44px;
  padding: 0 8px;
  font-size: 16px;
}
</style>  